<template>
	<view class="leave_box">
    <navTitle :title="'設置'"></navTitle>
    <view class="row-p" style="margin-top: 10px;">
      <view class="r-p-l">上班打卡提醒</view>
      <view class="r-p-r">
        <u-switch v-model="checkedOn" active-color="#4CD964" inactive-color="#9EA5AC" />
      </view>
    </view>
    <view class="row-p" style="margin-top: 10px;">
      <view class="r-p-l">下班打卡提醒</view>
      <view class="r-p-r">
        <u-switch v-model="checkedOut" active-color="#4CD964" inactive-color="#9EA5AC" />
      </view>
    </view>
	</view>
</template>

<script>
import navTitle from './components/nav-title.vue';
export default {
	components: {navTitle},
	data() {
		return {
      checkedOn:true,
      checkedOut:false,
		};
	},
	props: {
	},
	computed: {},
	methods: {
	}
};
</script>
<style lang="scss" scoped>
.leave_box{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #F4F6FA;
}
.row-p{
  width: calc(100% - 40px);
  padding: 15px 10px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}
.r-p-l{
  flex: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 23px;
  view{
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    margin-left: 30px;
  }
}
.r-p-r{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  view{
    font-weight: 600;
    font-size: 15px;
    color: #333333;
    line-height: 20px;
    margin-right: 10px;
  }
  img{
    width: 8px;
    height: 14px;
  }
}
</style>
